html5 canvas-1.canvas介绍(hello canvas)
发布时间：2013-01-07 17:00:31 作者：佚名 
我要评论
我要评论大家都知道，目前并不是所有的浏览器中支持html5，就算是支持html5的浏览器，也不见得支持html5所有的新特性,建议大家使用firefox（开发者的最爱）或者是chrome浏览器，我所有的例子都是基于firefox开发的
从今天开始，我们将开始一个关于html5 canvas的系列课程。这个系列是我读《HTML5 Canvas：Native Interactivity and Animation for the Web》后的总结，有兴趣的朋友可以去下载英文原版书籍阅读。这本书通过介绍canvas游戏开发的方式，向我们展现canvas强大的功能，我觉得相当不错，通过阅读这本书我学到了canvas很多的知识。其实canvas本身的api并不多，关键是活学活用，学会对api的组合使用制作出令人难以置信的效果。而这本书就是你学习canvas最好的选择，只可惜他暂时还没有中文版，英文不好的朋友只有再等等了。
大家都知道，目前并不是所有的浏览器中支持html5，就算是支持html5的浏览器，也不见得支持html5所有的新特性。所以大家要选择一款比较新的浏览器作为自己的调试环境，建议大家使用firefox（开发者的最爱）或者是chrome浏览器，我所有的例子都是基于firefox开发的。
html5相关的基础知识这里就不做介绍了，网上有很多关于html5的教程，自行学习吧。学习html5需要大家有比较好的javascript的基础，大家可以去汤姆大叔的博客进行学习：http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html。其实他的这个系列课程还是有相当难度的，50多篇全学好你应该算是js专家了。
现在我们正式开始我们的canvas课程，第一个例子：“hello canvas”。
首先需要在body中添加canvas标签，如下：
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
canvas中的text部分将会在浏览器不支持canvas对象时显示。
定义了canvas标签，当我们需要通过js对他进行操作的时候，通过getElementById就可以实现。
var theCanvas = document.getElementById("canvasOne");我们现在已经习惯使用jquery来开发任务，那么使用jquery如何获取canvas对象呢？
var canvas = $('#canvasOne').get(0);或var canvas = $('#canvasOne')[0];不知道大家注意到get(0)和[0]没有，如果没有使用get()方法或者[]下标的话，你的js代码将不能正常对canvas进行操作。因为$('#canvasOne')获取到的是一个jquery对象，而我们实际要操作的是一个html dom对象。这里有存在一个jquery对象转变成dom对象的问题，通过get()或者下标的方式就完成了这个转换。如果需要把一个dom对象转换成jquery对象，可以使用$()方法实现。不清楚的朋友只有自己去百度了，这里不做深究。
为了代码的健壮性，我们需要判断你的浏览器是否支持canvas对象，可以通过下面代码实现。
if (!theCanvas || !theCanvas.getContext) {
return;
}
不过推荐大家使用modernizr.js库完成这一工作，这是一个很通过的html5 js库，提供了很多有用的方法
function canvasSupport () {
return Modernizr.canvas;
}
canvas支持2d渲染，通过如下代码实现：
var context = theCanvas.getContext("2d");
下面我们就可以通过context对象在canvas上绘制图像了。
//设置区域颜色
context.fillStyle = "#ffffaa";
//绘制区域
context.fillRect(0, 0, 500, 300);
//设置字体
context.font = "20px _sans";
//设置垂直对齐方式
context.textBaseline = "top";
//绘制文字
context.fillText ("Hello World!", 195, 80);
//设置边框颜色
context.strokeStyle = "#000000";
//绘制边框
context.strokeRect(5, 5, 490, 290);
下面介绍下图片的绘制。由于图片的异步下载的，为了保证你用canvas绘制一个图片时，该图片已经下载完毕，我们使用下面的方式：
var helloWorldImage = new Image();
helloWorldImage.src = "helloworld.gif";
helloWorldImage.onload = function () {
context.drawImage(helloWorldImage, 160, 130);
}
当图片下面完毕时，会触发onload事件，这里再使用context对象绘制图片。
大家下载demo看完整代码，demo下载地址：html5canvas.helloworld.zip
大家都知道，目前并不是所有的浏览器中支持html5，就算是支持html5的浏览器，也不见得支持html5所有的新特性。所以大家要选择一款比较新的浏览器作为自己的调试环境，建议大家使用firefox（开发者的最爱）或者是chrome浏览器，我所有的例子都是基于firefox开发的。
html5相关的基础知识这里就不做介绍了，网上有很多关于html5的教程，自行学习吧。学习html5需要大家有比较好的javascript的基础，大家可以去汤姆大叔的博客进行学习：http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html。其实他的这个系列课程还是有相当难度的，50多篇全学好你应该算是js专家了。
现在我们正式开始我们的canvas课程，第一个例子：“hello canvas”。
首先需要在body中添加canvas标签，如下：
复制代码
代码如下:<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
canvas中的text部分将会在浏览器不支持canvas对象时显示。
定义了canvas标签，当我们需要通过js对他进行操作的时候，通过getElementById就可以实现。
var theCanvas = document.getElementById("canvasOne");我们现在已经习惯使用jquery来开发任务，那么使用jquery如何获取canvas对象呢？
var canvas = $('#canvasOne').get(0);或var canvas = $('#canvasOne')[0];不知道大家注意到get(0)和[0]没有，如果没有使用get()方法或者[]下标的话，你的js代码将不能正常对canvas进行操作。因为$('#canvasOne')获取到的是一个jquery对象，而我们实际要操作的是一个html dom对象。这里有存在一个jquery对象转变成dom对象的问题，通过get()或者下标的方式就完成了这个转换。如果需要把一个dom对象转换成jquery对象，可以使用$()方法实现。不清楚的朋友只有自己去百度了，这里不做深究。
为了代码的健壮性，我们需要判断你的浏览器是否支持canvas对象，可以通过下面代码实现。
复制代码
代码如下:if (!theCanvas || !theCanvas.getContext) {
return;
}
不过推荐大家使用modernizr.js库完成这一工作，这是一个很通过的html5 js库，提供了很多有用的方法
复制代码
代码如下:function canvasSupport () {
return Modernizr.canvas;
}
canvas支持2d渲染，通过如下代码实现：
var context = theCanvas.getContext("2d");
下面我们就可以通过context对象在canvas上绘制图像了。
复制代码
代码如下://设置区域颜色
context.fillStyle = "#ffffaa";
//绘制区域
context.fillRect(0, 0, 500, 300);
//设置字体
context.font = "20px _sans";
//设置垂直对齐方式
context.textBaseline = "top";
//绘制文字
context.fillText ("Hello World!", 195, 80);
//设置边框颜色
context.strokeStyle = "#000000";
//绘制边框
context.strokeRect(5, 5, 490, 290);
下面介绍下图片的绘制。由于图片的异步下载的，为了保证你用canvas绘制一个图片时，该图片已经下载完毕，我们使用下面的方式：
复制代码
代码如下:var helloWorldImage = new Image();
helloWorldImage.src = "helloworld.gif";
helloWorldImage.onload = function () {
context.drawImage(helloWorldImage, 160, 130);
}
当图片下面完毕时，会触发onload事件，这里再使用context对象绘制图片。
大家下载demo看完整代码，demo下载地址：html5canvas.helloworld.zip
相关文章
- HTML5中加入了全新的结构型元素，例如页眉header，页脚footer，导航nav，内容article，章节section等除了这种整个页面的结构型元素，html5也加入了块级别的语义元素,感兴趣2013-01-31
- 今天把网页改成了HTML5的，调试了一下，在FF和Opera中都显示正常了，到了IE6上却变得面目全非了。GOOGLE了一下，发现了html5shiv这个项目，可以把HTML5的新元素转换成IE6认2011-11-23
- 学习w3c是看到一个检测您的浏览器是否支持 HTML5 视频的方法，在这里与大家分享下，感兴趣的各位可以参考下哈，希望可以帮助到你2013-03-28
- html5大行其道的时代已经到来,如果还在纠结于，是否应该掌握html5和css3技术时，请狠狠的抽自己几个嘴巴，然后，苦学吧！下面我们来看几个解决兼容IE6\7\8不支持html5标签2013-01-07
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
如今HTML5愈来愈引发大家的关注了，HTML5的开发者将必须考虑向下兼容的问题:如何让所有的浏览器都能识别HTML5标签样式2012-12-07input file上传文件样式支持html5的浏览器解决方案
最近在使用file上传控件，发现了file上传控件的两个兼容性问题:一个是file上传控件在火狐下无法通过css改变width，另一个是file上传控件在不同的浏览器下的外观和行为都不2012-11-14- 越来越多的站点开始使用 HTML5 标签，但是目前的情况是还有很多人在使用IE6、IE7、IE8。为了让所有浏览者都可以正常的访问，解决方案有下面两个2012-12-11
- 让所有IE支持HTML5的解决方案.2009-10-20
- 浏览器不会给未知元素设定任何样式（不同浏览器对元素会有不同的默认样式）在IE9之前的版本中，也不能对未知元素设定样式，针对这个问题有一个弥补方案，感兴趣的朋友可以2013-04-01
最新评论